<template>
    <div class="container">
        <div class="search-list">
            <el-table 
                border 
                stripe
                :data="dataList"
                header-cell-class-name="hdCellStyle" 
                :default-sort="sort"
                @sort-change="handleSortChange"
            >
                <el-table-column 
                  type="index" 
                  label="序号"
                  width="80"
                  align="center"
                >
                </el-table-column>
                <el-table-column 
                  label="店铺名称"
                  min-width="150"
                  align="center"
                  prop="store_name"
                >
                </el-table-column>
                <el-table-column 
                  label="所属品线"
                  min-width="120"
                  align="center"
                  prop="depart_name"
                >
                </el-table-column>
                <el-table-column 
                  label="访问人数"
                  min-width="120"
                  align="center"
                  prop="uv"
                  sortable="custom"
                >
                    <template #default="{row}">
                        {{row.uv|_formatterNum}}
                    </template>
                </el-table-column>
                <el-table-column 
                  label="访问次数"
                  min-width="150"
                  align="center"
                  prop="pv" 
                  sortable="custom"
                >
                    <template #default="{row}">
                        {{row.pv|_formatterNum}}
                    </template>
                </el-table-column>
                <el-table-column 
                  label="人均访问次数"
                  min-width="150"
                  align="center"
                  prop="ave"
                >
                    <template #default="{row}">
                        {{row.ave|_formatterNum}}
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="bottom flex-item">
            <div class="btn-group">
            </div>
            <div class="paginationOne">
                <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pageArr.curpage"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="pageArr.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pageArr.total">
                </el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
import { formatterNum } from '@/common/js/util.js'
import Qs from 'qs';
export default {
    props: {
        searchContent: Object,
        update: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            pageArr: {
                curpage: 1,           // 当前页码
                pageSize: localStorage.getItem('pageSize') * 1 || 20,         // 每页显示数量
                total: 0              // 数据总数
            },
            dataList: [],             // 列表数据
            sort: {prop: 'uv', order: 'descending'}, // 排序
            order: {
                descending: "desc",
                ascending: 'asc'
            }
        }
    },
    methods: {
        getData(action = null) {
            let datas = {
                pageSize: this.pageArr.pageSize,
                page: this.pageArr.curpage,
                sort: this.sort.prop, // 排序字段
                order: this.order[this.sort.order], // 排序规则
                ...this.searchContent
            }
            if(action == "export") {
                datas.is_export = 1;
                const origin = this.$store.state.location.origin;
				const url = origin + '/admin/yt_car/index.php?act=statistic&op=storeFlowDetail&' + Qs.stringify(datas);
                window.open(url)
            } else {
                this.$http.get('/admin/yt_car/index.php?act=statistic&op=storeFlowDetail', {params: datas}).then(res => {
                    if(res.code == 1) {
                        this.dataList = res.data.list || []
                        this.pageArr.total = parseInt(res.data.totalCount)
                    }
                })
            }
        },
        handleSizeChange(pageSize) {
            localStorage.setItem('pageSize', pageSize);
			this.pageArr.pageSize = pageSize;
			this.pageArr.curpage = 1;
			this.getData();
        },
        handleCurrentChange(page) {
			this.pageArr.curpage = page;
			this.getData();
        },
        handleSortChange({ column, prop, order }) {
            this.sort.prop = prop
            this.sort.order = order
            this.pageArr.curpage = 1;
            this.getData()
        }
    },
    filters: {
        _formatterNum(val) {
            return formatterNum(val)
        }
    },
    watch: {
        searchContent: {
            handler(val, oldVal) {
                this.pageArr.curpage = 1;
                this.getData()
            },
            deep: true,
            immediate: true
        }
    }
}
</script>
<style lang="scss" scoped>
.container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    display: -webkit-flex;
    justify-content: space-between;
    overflow: hidden;
    .search-list {
        flex-grow: 1;
        height: 100px;
        /deep/.el-table {
            height: 100%;
            .el-table__body-wrapper, .el-table__fixed-body-wrapper {
                height: calc(100% - 36px)!important;
                overflow-y: auto;
            }
            &.el-table--mini th {
                padding: 4px 0;
            }
            .cell { line-height: 22px; }
            .caret-wrapper {
                height: 27px;
            }
            .sort-caret.ascending {
                top: 1px
            }
            .sort-caret.descending {
                bottom: 4px;
            }
            //滚动条的宽度
            .el-table__body-wrapper {
                &::-webkit-scrollbar { 
                    width: 7px;
                    height: 7px;
                }
                //滚动条的滑块
                &::-webkit-scrollbar-thumb {
                    cursor: pointer;
                    background-color: rgba(144, 147, 153, 0.3);
                    border-radius: 7px;
                }
            }
        }
    }
}
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
</style>